import React from "react";
import { Button, Col, Container, Form, FormGroup, Row } from "react-bootstrap";
import "./index.css";
import { useNavigate } from "react-router-dom";

const EditContact:React.FC = ()=> {
    
    //TODO: support edit contact.

    const navigate = useNavigate();

    return (<Container id={'editchatcontact'} 
                className="d-flex flex-column"
            fluid
        >
                <FormGroup as={Row}>
                    <Form.Label as={Col} sm={3} className="text-end">Tag Name:</Form.Label>
                    <Col sm={7}>
                        <Form.Control id="groupname" type="input"></Form.Control>
                    </Col>
                </FormGroup>
                <Container className="separator"/>
                <FormGroup as={Row}>
                    <Form.Label as={Col} sm={3} className="text-end">Alias:</Form.Label>
                    <Col sm={7}>
                        <Form.Control id="grouptag" type="input"></Form.Control>
                    </Col>
                </FormGroup>
                <Container className="separator"/>
                <FormGroup as={Row}>
                    <Form.Label as={Col} sm={3} className="text-end">Contact Description:</Form.Label>
                    <Col sm={7}>
                        <Form.Control id="groupdesc" type="input"></Form.Control>
                    </Col>
                </FormGroup>
                <Button 
                    className="mt-5" 
                    style={{width:"50%", alignSelf:'center'}}
                    onClick={()=>{
                        //TODO:update contact info.
                        navigate(-1);
                    }}
                    >Save</Button>
            </Container>)
}

export default EditContact;

